<template>
    <div v-if="editStatus" class="m-edit-modal">
        <div class="header">
            {{title}}
            <span @click="close"><Icon type="close-round"></Icon></span>
        </div>
        <div class="m-content">
            <Form ref="myData" :model="myData" :rules="ruleValidate" :label-width="100">
                <Card>
                    <Row>
                        <Col span="12">
                            <FormItem label="车行名称" prop="dealer_name">
                                <Input v-model="myData.dealer_name" style="width: 200px" placeholder="请输入车商名称"></Input>
                            </FormItem>
                            <FormItem label="登录账号" prop="member_username">
                                <Input v-model="myData.member_username" style="width: 200px" disabled placeholder="请输入车商名称"></Input>
                            </FormItem>
                            <FormItem label="执照注册日期" prop="dealer_regtime">
                                <DatePicker type="date" @on-change="setTime" v-model="myData.dealer_regtime" placeholder="选择日期"
                                            style="width: 200px"></DatePicker>
                            </FormItem>
                            <FormItem label="车商分类" prop="merchants_type_id">
                                <CheckboxGroup v-model="myData.merchants_type_id" placeholder="请选车商分类">
                                    <Checkbox :label="item.val+''" :value="item.val" v-for="item in shopTypeData" :key="item.val">{{item.title}}</Checkbox>
                                </CheckboxGroup>
                                <!--<Select v-model="myData.merchants_type_id" multiple  placeholder="请选车商分类" style="width: 200px" >-->
                                    <!--<Option :value="item.val+''" v-for="item in shopTypeData" :key="item.val">{{item.title}}</Option>-->
                                <!--</Select>-->
                            </FormItem>
                            <FormItem label="车商等级" prop="dealer_level">
                                <Select v-model="myData.dealer_level" placeholder="请选车商等级" style="width: 200px">
                                    <Option value="1">普通车商</Option>
                                    <Option value="2">铜牌车商</Option>
                                    <Option value="3">银牌车商</Option>
                                    <Option value="4">金牌车商</Option>
                                </Select>
                            </FormItem>
                            <FormItem label="联系人" prop="dealer_contacts">
                                <Input v-model="myData.dealer_contacts" style="width: 200px" placeholder="请输入联系人"></Input>
                            </FormItem>
                            <FormItem label="联系电话" prop="dealer_tel">
                                <Input v-model="myData.dealer_tel" style="width: 200px" placeholder="请输入联系人电话"></Input>
                            </FormItem>
                            <FormItem label="门市地址" prop="dealer_provinces" >
                                <m-address  :transfer="true"   @on-change="updateAddress" :provincesId="myData.dealer_provinces" :cityId="myData.dealer_city"
                                           :districtsId="myData.dealer_districts"></m-address>
                            </FormItem>
                            <FormItem label="详细地址" prop="dealer_address">
                                <Input v-model="myData.dealer_address" style="width: 300px" placeholder="请输入门市地址"></Input>
                            </FormItem>
                            <FormItem label="所属市场" prop="bazaar_id">
                                <Select :transfer="true" v-model="myData.bazaar_id" placeholder="请选车商所属市场" style="width: 200px">
                                    <Option :value="item.bazaar_id+''" v-for="item in dealerBazaarData" :key="item.bazaar_id">{{item.bazzar_title}}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="是否启用" prop="dealerstop">
                                <RadioGroup v-model="myData.dealer_stop">
                                    <Radio label="1">启用</Radio>
                                    <Radio label="0">禁用</Radio>
                                </RadioGroup>
                            </FormItem>
                            <FormItem label="是否推荐" prop="dealerisrecom">
                                <RadioGroup v-model="myData.dealer_isrecom">
                                    <Radio label="1">推荐</Radio>
                                    <Radio label="0">取消推荐</Radio>
                                </RadioGroup>
                            </FormItem>
                            <FormItem label="是否垫资" prop="is_padfunded">
                                <RadioGroup v-model="myData.is_padfunded">
                                    <Radio label="1">垫资</Radio>
                                    <Radio label="0">不垫资</Radio>
                                </RadioGroup>
                            </FormItem>
                            <FormItem label="营业执照" prop="dealer_logo">
                                <img :src="myData.dealer_logo" width="50%">
                                <Upload :action="uploadUrl" :headers="tokenData" :on-success="uploadMainpicSuccess">
                                    <Button type="ghost" icon="ios-cloud-upload-outline">上传图片</Button>
                                </Upload>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                    <FormItem label="详细介绍" prop="dealer_remark">
                        <UE :defaultMsg=myData.dealer_remark :config=config ref="ue"></UE>
                    </FormItem>
                    </Row>
                    <FormItem>
                        <Button type="primary" @click="handleSubmit('myData')">提交</Button>
                    </FormItem>
                </Card>
            </Form>
        </div>
    </div>
</template>
<script>
    import upLoadFile from '../../components/upLoadFile.vue'
    import address from '../../components/address.vue'
    import API from '../../config/api'
    import qs from 'qs'
    import {formatDateTime,checkTel} from '../../config/utils'
    import UE from '../../components/ue/ue.vue';

    export default {
        props: ['editStatus', 'editData', 'title'],
        components: {
            'up-load-file': upLoadFile,
            'm-address':address,
            'up-load-file': upLoadFile, UE
        },
        data() {
            return {
                myData:{},
                dealerInfo: {},
                provincesData: [],
                cityData: [],
                districtsData: [],
                dealerBazaarData:[],
                carBrandData:[],
                shopTypeData: [],
                ruleValidate: {
                    dealer_type:[
                        {required: true, message: '请选择车商分类'}
                    ],
                    dealer_name: [
                        {required: true, message: '车行名称不能为空', trigger: 'blur'}
                    ],
                    dealer_contacts: [
                        {required: true, message: '联系人不能为空', trigger: 'blur'}
                    ],
                    dealer_tel: [
                        {required: true, message: '请输入联系人电话', trigger: 'blur'},
                        {validator:checkTel}
                    ],
                    dealer_regtime:[
                        {required: true, message: '请填写执照注册日期'}
                    ],
                    dealer_provinces:[
                        {required: true, message: '请填门市地址'}
                    ],
                    dealer_address: [
                        {required: true, message: '请填详细地址', trigger: 'blur'}
                    ],
                },

                tokenData: {
                    token: this.$store.state.userData.token
                },
                uploadUrl: process.env.BASE_URL + API.UPLOAD_FILE,
                defaultMsg: '',
                config: {
                    initialFrameWidth: 600,
                    initialFrameHeight: 350,
                    serverUrl: process.env.BASE_URL + process.env.API_MANAGER + "/ue/controller"
                }
            }
        },
        methods: {
            //提交保存
            saveDealerInfo() {
                var text = [];
                for(var i = 0 ;i < this.myData.merchants_type_id.length; i++){
                    for(var j = 0 ;j < this.shopTypeData.length; j++){
                        if(this.myData.merchants_type_id[i] == this.shopTypeData[j].val){
                            text.push(this.shopTypeData[j].title);
                        }
                    }
                }
                this.myData.merchants_type = text.join(',');
                this.myData.merchants_type_id = this.myData.merchants_type_id.join(',');
                this.myData.dealer_regtime = Date.parse(new Date(this.myData.dealer_regtime))/1000;
                this.myData.dealer_remark = this.$refs.ue.getUEContent();
                this.axios.post(API.SAVE_DEALER_INFO, this.myData).then(response => {
                    if (response.data.code == 1) {
                        this.close();
                        this.$Message.success(response.data.msg);
                    } else {
                        this.$Message.error(response.data.msg);
                    }
                }, response => {
                })
            },
            getImgUrl(imgUrl) {
                this.myData.dealer_logo = imgUrl;
            },
            //上传主图成功回调
            uploadMainpicSuccess(response){
                this.myData.dealer_logo = response.data.fullUrl;
            },
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.saveDealerInfo();
                    } else {
                        this.$Message.error('请完善信息!');
                    }
                })
            },
            close() {
                this.$emit('closeModal')
            },
            updateAddress(data){
                this.myData.dealer_provinces = data.pId;
                this.myData.dealer_city = data.cId;
                this.myData.dealer_districts = data.dId;
            },
            dealerBazaar(){
                this.axios.get(API.GET_BAZAAR_LIST).then(response => {
                    this.dealerBazaarData = response.data.data;
                })
            },
            carBrand(){
                this.axios.post(API.GET_BRAND).then(response => {
                    this.carBrandData = response.data.data;
                })
            },
            shopType(){
                this.axios.post('/zscar-api/zscar/sys/configure/exclude/list?type=SHOP_TYPE').then(response => {
                    this.shopTypeData = response.data.data;
                })
            },
            setTime(time) {
                console.log(time)
            }
        },
        created(){
            let vm = this;
            if (vm.editData.dealer_id) {
                vm.editData.dealer_regtime = formatDateTime(vm.editData.dealer_regtime*1000);
                vm.editData.dealer_provinces = parseInt(vm.editData.dealer_provinces);
                vm.editData.dealer_city = parseInt(vm.editData.dealer_city);
                vm.editData.dealer_districts = parseInt(vm.editData.dealer_districts);
            }
            this.myData = this.editData;
            this.dealerBazaar();
            this.carBrand();
            this.shopType();
        },
        watch:{
            editData(val,oldVal){
                if (val.dealer_id) {
                    val.dealer_regtime = formatDateTime(val.dealer_regtime*1000);
                    val.dealer_provinces = parseInt(val.dealer_provinces);
                    val.dealer_city = parseInt(val.dealer_city);
                    val.dealer_districts = parseInt(val.dealer_districts);
                    this.dealerstop = val.dealer_stop;
                    this.dealerisrecom = val.dealer_isrecom;
                }
                this.myData = val;
            }
        }
    }
</script>
<style lang='scss' scoped>
    .m-edit-modal {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #fff;
        z-index: 100;

        .header {
            background-color: #f8f8f9;
            height: 45px;
            line-height: 45px;
            font-size: 16px;
            padding-left: 25px;
            padding-right: 5px;
            color: #000;
            box-shadow: 1px 1px 1px rgba(220, 172, 172, .5);

        span {
            float: right;
            padding: 0 20px;
            cursor: pointer;
        }

        }
        .m-content {
            margin-top: 20px;
            padding-bottom: 100px;
            overflow-y: auto;
        }

        .list-header {
            height: 45px;
            color: #333;
            line-height: 45px;
        }

        .list-row {
            padding-left: 100px;
            font-size: 14px;
            line-height: 40px;
        }
    }

</style>
